<template>
  <div class="scroll-wrap">
    <el-table
      class="top-table selectOption"
      :data="tableData"
      border
      style="
        width: 100%;
        margin: 0 auto;
        --el-table-border-color: none;
        --el-table-bg-color: none;
        --el-table-tr-bg-color: none;
      "
      :row-class-name="tableRowClassName"
      :header-row-class-name="tableHeaderRowClassName"
      :cell-style="{
        color: '#FFFFFF',
        'text-align': 'center',
        'font-family': 'DINPro',
      }"
      :header-cell-style="{
        backgroundColor: 'transparent !important',
        backgroundRepeat: 'no-repeat',
        backgroundPosition: 'center',
        backgroundSize: 'auto',
      }"
    >
      <el-table-column label="序号" width="60" show-overflow-tooltip>
        <template #default="scope">
          <span>
            {{ scope.row.sortIndex }}
          </span>
        </template>
      </el-table-column>
      <el-table-column
        prop="materialName"
        label="产品"
        show-overflow-tooltip
        min-width="200"
      />
      <el-table-column
        prop="figureNumber"
        label="生产批号"
        show-overflow-tooltip
        min-width="110"
      />
      <el-table-column
        prop="smeltStatus"
        label="状态"
        show-overflow-tooltip
        min-width="90"
      />
    </el-table>

    <div class="scroll-content">
      <vue3-seamless-scroll
        class="scroll-list"
        :list="tableData"
        :hover="true"
        :step="1"
        :wheel="true"
        :isWatch="true"
        :limitScrollNum="12"
        :singleHeight="35"
        :singleWaitTime="3000"
        :key="scrollKey"
        v-model="isParse"
        v-loading="loading"
      >
        <el-table
          class="scroll-ul bottom-table selectOption"
          :data="tableData"
          border
          style="
            width: 100%;
            margin: 0 auto;
            --el-table-border-color: none;
            --el-table-bg-color: none;
            --el-table-tr-bg-color: none;
          "
          :row-class-name="tableRowClassName"
          :header-row-class-name="tableHeaderRowClassName"
          :cell-style="{
            color: '#FFFFFF',

            'font-family': 'DINPro',
          }"
          :header-cell-style="{
            backgroundColor: 'transparent !important',
            backgroundRepeat: 'no-repeat',
            backgroundPosition: 'center',
            backgroundSize: 'auto',
            height: '100%',
          }"
        >
          <el-table-column
            label="序号"
            width="60"
            show-overflow-tooltip
            align="center"
          >
            <template #default="scope">
              <span :class="getColor(scope.row.smeltStatus)">
                {{ scope.row.sortIndex }}
              </span>
            </template>
          </el-table-column>
          <el-table-column
            prop="materialName"
            label="产品"
            show-overflow-tooltip
            min-width="200"
          >
            <template #default="scope">
              <span :class="getColor(scope.row.smeltStatus)">
                {{ scope.row.materialName }}
              </span>
            </template>
          </el-table-column>
          <el-table-column
            prop="figureNumber"
            label="生产批号"
            show-overflow-tooltip
            align="left"
            min-width="110"
          >
            <template #default="scope">
              <span :class="getColor(scope.row.smeltStatus)">
                {{ scope.row.figureNumber }}
              </span>
            </template>
          </el-table-column>
          <el-table-column
            prop="smeltStatus"
            label="状态"
            align="center"
            min-width="90"
          >
            <template #default="scope">
              <div
                v-if="
                  scope.row?.smeltStatus === 1 ||
                  scope.row?.smeltStatus === 2 ||
                  scope.row?.smeltStatus === 3
                "
              >
                <div
                  class="crilcle"
                  :style="{
                    float: 'left',
                    backgroundColor:
                      scope.row.smeltStatus == 2
                        ? '#ffd580'
                        : scope.row.smeltStatus == 3
                        ? '#7fffd4'
                        : '#a8bed8',
                  }"
                ></div>
                <span
                  v-if="scope.row.smeltStatus == 1"
                  class="c-[#a8bed8] float-left pl-[4px]"
                  >未熔炼</span
                >
                <span
                  v-if="scope.row.smeltStatus == 2"
                  class="c-[#ffd580] float-left pl-[4px]"
                  >熔炼中</span
                >
                <span
                  v-if="scope.row.smeltStatus == 3"
                  class="c-[#7fffd4] float-left pl-[4px]"
                  >已完成</span
                >
              </div>

              <span v-else>{{}}</span>
            </template>
          </el-table-column>
        </el-table></vue3-seamless-scroll
      >
    </div>
  </div>
</template>

<script lang="ts" setup>
import { deepClone } from "@/utils/commonHooks";
import { Vue3SeamlessScroll } from "vue3-seamless-scroll";
import { useDictStoreHook } from "@/store/modules/dictionary"; // 引入
import request from "@/utils/request";
const dictionaryStore = useDictStoreHook();
const props = defineProps({
  // table显示行数
  tableColumnNum: {
    type: Number,
    default: 20,
  },
  second: {
    type: Number,
    default: () => {
      return 1000 * 60 * 10;
    },
  },
});

const { tableColumnNum, second } = toRefs(props);

const planBIDTOS = ref([]);
const isParse = ref(false);
const tableData = ref<any>([]);

const tableObject = {
  createTime: "",
  createdUserId: "",
  createdUserName: "",
  deleted: "",
  enabled: "",
  equipCode: "",
  equipId: "",
  equipName: "",
  figureNumber: "",
  id: "",
  ids: "",
  lastUpdateTime: "",
  lastUpdatedUserId: "",
  lastUpdatedUserName: "",
  smeltStatus: "",
  modelingStatus: "",
  planStatus: "",
  pouringStatus: "",
  productCode: "",
  productFigureNumber: "",
  productId: "",
  materialName: "",
  productionDate: "",
  remarks: "",
  sortIndex: "",
  version: "",
};

const scrollKey = ref<number>(1);

function bornTable() {
  const data = deepClone(planBIDTOS.value || []);
  if (data.length > tableColumnNum.value) {
    tableData.value = data;
  } else {
    let resultData = data;
    const resultNum = tableColumnNum.value - data.length;
    if (resultNum > 0) {
      for (let i = 0; i < resultNum; i++) {
        resultData.push(tableObject);
      }
    }
    tableData.value = resultData;
  }
  if (tableData.value.length > 12) {
    setTimeout(() => {
      isParse.value = true;
    }, 3000);
  } else {
    isParse.value = false;
  }
  scrollKey.value = Number(new Date());
}
const loading = ref(false);
function getPlanBIDTOList() {
  loading.value = true;
  request({
    url: "/mes/mesplanworkingform/getCurrentDaySmeltStatus",
    method: "post",
    data: {},
  })
    .then((res) => {
      if (res.code === 200) {
        planBIDTOS.value = res.data || [];
        planBIDTOS.value?.forEach((item, index) => {
          item.sortIndex = index + 1;
        });
        bornTable();
      }
    })
    .finally(() => {
      loading.value = false;
    })
    .catch(() => {
      planBIDTOS.value = [{}];
      bornTable();
      loading.value = false;
    });
}

// 行样式解析
function tableRowClassName(rowIndex: any) {
  if (rowIndex.rowIndex % 2 != 0) {
    return "evenRow";
  }
  return "oddRow";
}

function tableHeaderRowClassName() {
  if (tableColumnNum.value === 12) {
    return "h-[35px]";
  }
  return "h-[28px]";
}

function getColor(status: number) {
  if (status === 1) {
    return "c-[#a8bed8]";
  } else if (status === 2) {
    return "c-[#ffd580]";
  } else if (status === 3) {
    return "c-[#7fffd4]";
  }
}

// 定时刷新
let timer: any = ref(null);

// 大屏切换处理方法
function handleScreenData() {
  clearInterval(timer.value);
  timer.value = null;

  timer.value = setInterval(() => {
    getPlanBIDTOList();
    // 重复调用组件的重新获取方法
  }, second.value);
}

onMounted(() => {
  getPlanBIDTOList();
  handleScreenData();
});
onBeforeUnmount(() => {
  clearInterval(timer.value);
  timer.value = null;
});
</script>

<style lang="scss" scoped>
.scroll-wrap {
  width: 100%;
  height: 890px;
  overflow: hidden;
}
.scroll-header,
.scroll-content {
  width: 100%;
  display: flex;
}
.scroll-list {
  width: 100%;
  overflow: hidden;
}
.scroll-ul {
  width: 100%;
  display: flex;
  flex-direction: column;
}
.scroll-li {
  width: 100%;
  display: flex;
  line-height: 35px;
}
// .scroll-li > span {
//   display: flex;
//   height: 35px;
//   line-height: 35px;
//   border-top: 1px solid #dcdfe6;
//   border-left: 1px solid #dcdfe6;
//   padding-left: 5px;
//   overflow: hidden;
// }
// .scroll-li > span:last-child {
//   border-right: 1px solid #dcdfe6;
// }
// .scroll-header .scroll-li {
//   background-color: #f8f9ff;
// }
// .scroll-header .scroll-li > span {
//   font-weight: bold;
//   border-top: none;
// }
// .scroll-content .scroll-ul:last-child .scroll-li {
//   border-bottom: 1px solid #dcdfe6;
// }
:deep(.bottom-table .el-table__header) {
  display: none;
}

:deep(.top-table .el-table__body-wrapper) {
  display: none;
}
// 整体表格样式
:deep(.el-table) {
  .el-table__border-left-patch {
    width: 0;
  }

  thead {
    // height: 78px;
    // background: rgba(15, 36, 62, 0.6);
    background: rgba(2, 79, 173, 0.3);
    .cell {
      font-size: 16px;
      line-height: 24px;
      writing-mode: horizontal-tb;
      word-spacing: 0px;
      writing-mode: horizontal-tb;
      text-orientation: upright;
      color: transparent;
      background: linear-gradient(
          0deg,
          rgb(88, 175, 255) 0px,
          rgb(255, 255, 255) 100%
        )
        text;
      clip-path: inset(1px);
    }

    tr:nth-last-child(1) {
      border-right: none;
    }
  }
  tbody {
    tr {
      height: 35px;
      .cell {
        font-size: 15px;
        line-height: 35px;
      }
    }
    tr:hover {
      background-color: rgb(55, 90, 136) !important;
    }
    td.el-table__cell {
      background-color: transparent !important;
      border: none !important;
    }
  }

  .el-table__empty-text {
    color: rgb(199, 228, 240);
    font-size: 16px;
    line-height: 200px;
  }
}
// 单行样式
:deep(.evenRow) {
  background: rgba(15, 36, 62, 0.6);
  td {
    // .cell {
    //   color: rgb(104, 201, 240);
    // }
    .cell {
      color: rgb(168, 190, 216);
    }
  }
}

// 双行样式
:deep(.oddRow) {
  background: rgba(10, 24, 42, 0.6);
  td {
    .cell {
      color: rgb(168, 190, 216);
    }
  }
}
// :deep(.el-progress) {
//   .el-progress-bar__outer {
//     background: rgba(74, 97, 126, 0.7);
//   }
//   .el-progress-bar__innerText {
//     font-size: 30px;
//     line-height: 40px;
//   }
//   .el-progress-bar__outer {
//     border-radius: 8px;
//   }
//   .el-progress-bar__inner {
//     border-radius: 8px;
//     background-image: linear-gradient(to right, #fa5a53, #fa5a53);
//   }
// }

:deep(.el-progress) {
  .el-progress-bar__outer {
    background: rgba(74, 97, 126, 0.7);
  }
  .el-progress-bar__innerText {
    font-size: 20px;
    margin-bottom: 20px;
  }
  // .el-progress-bar__outer {
  //   border-radius: 8px;
  // }
  // .el-progress-bar__inner {
  //   border-radius: 8px;
  //   background-image: linear-gradient(to right, #fa5a53, #fa5a53);
  // }
}
:deep(.el-table--border th.el-table__cell) {
  padding: 7px 0;
}
:deep(.el-table th.el-table__cell > .cell) {
  white-space: pre;
  // white-space: pre-wrap; // 也行。
}

.crilcle {
  width: 18px;
  height: 18px;
  border-radius: 4px;
  margin-top: 7px;
}

:deep(.el-loading-mask) {
  background-color: transparent;
}

:deep(.el-table tbody td.el-table__cell) {
  padding: 0px !important;
}
</style>
